<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<head>
    <title>创建课程</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://bootswatch.com/4/materia/bootstrap.min.css" >
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript">
        var itemHeight = 40;
        var dividerHeight = 1;

        function openMenu(obj) {
            menuTitleId = obj.id;
            menuId = "menu" + menuTitleId.substring(10);
            indicatorId = "indicator" + menuTitleId.substring(10);

            menu = document.getElementById(menuId);
            indicator = document.getElementById(indicatorId);
            height = menu.style.height;

            if (height == "0px" || height == "") {
                childAmount = menu.getElementsByTagName('div').length;
                dividerAmount = menu.getElementsByTagName('li').length;
                height = childAmount * itemHeight + dividerAmount * dividerHeight;
                menu.style.height = height + "px";
                indicator.style.transform = "rotate(180deg)";
            } else {
                menu.style.height = "0px";
                indicator.style.transform = "rotate(0deg)";
            }
        }
    </script>
    <style>

        .menus {
            width: 310px;
            overflow: hidden;
            background-color: lightyellow;
        }

        .menu {
            overflow: hidden;
            height: 0px;
            transition: all 0.3s ease;

        }

        .menu_title {
            width: 310px;
            height: 50px;
            line-height: 50px;
            background: white;
            color: black;
            font-size: 20px;
            padding-left: 15px;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;

            overflow: hidden;
        }

        .menu_title:hover {
            background: #f0f0f0;
            color: #23527c;
        }

        .indicator {
            width: 50px;
            height: 50px;
            font-weight: bold;
            position: absolute;
            right: 0px;
            top: 0px;
            transition: all 0.3s ease;

            text-align: center;
        }

        .item {
            width: 310px;
            height: 40px;
            line-height: 40px;
            background: #ffffff;
            color: white;
            padding-left: 30px;
            transition: all 0.3s ease;
            cursor: pointer;
            overflow: hidden;
        }

        .item:hover {
            background: antiquewhite;
        }

        .item a {
            width: 290px;
            height: 40px;
            display: block;
            text-decoration: none;
            color: #000000;
            text-decoration: none;
            font-size: 16px;
        }

        .item_divider {
            width: 322px;
            height: 1px;
            background: white;
            display: block;
            opacity: 0.8;
            margin-left: 4px;
        }

        .menu_divider {
            width: 100%;
            height: 1px;
            background: #e9e9e9;
        }

        .major-title {
            font-size: 30px;
            font-weight: bold;
            padding-left: 30px;
            padding-top: 20px;
        }

        .course-title {

            padding-top: 20px;
            font-family: SimHei;
        }


        .jiangshi {
            padding-top: 40px;
            color: rgba(24,24,24,0.57);
        }

        .keshi {
            padding-left: 70px;
            padding-top: 40px;
            color: rgba(24,24,24,0.57);
        }

        .course {
            margin-left: 30px;
            height: 170px;
            width: 800px;
            background-color: white;

        }

        .object-img {
            padding-left: 10px;
            width: 240px;
            height: 135px;
        }



    </style>
</head>
<body>
<div calss="container" style="background-color: #f4f4f4">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <h2 class="navbar-brand" href="#">大学课程在线学习系统>个人主页</h2>
    </nav>
    <div style="padding-left: 30px;">
        <h1 class="display-5" style="padding-top: 20px;" >您好，${sessionScope.user_session.userName}</h1>
        <p class="lead">ID:${sessionScope.user_session.userAccount}</p>
        <hr class="my-3">
    </div>
    <div class="row" style="padding-left: 20px;background-color: #f4f4f4;">
        <div class="col-sm-3">
            <div class="alert alert-dismissible alert-success">
                <h1 style="font-weight: bold;padding-left: 10px;font-size: 24px;">信息管理</h1>
            </div>
            <div class="menus">
                <div id="menu_title4" class="menu_title" onclick="openMenu(this)">
                    学生管理
                    <div class="indicator" id="indicator4">^</div>
                </div>
                <div class="menu" id="menu4">
                    <div class="item">
                        <a href="/cyb/studentShowPage">学生信息</a>
                    </div>
                    <li class="item_divider"></li>
                    <div class="item">
                        <a href="/cyb/addStudentPage">添加学生</a>
                    </div>
                </div>
                <li class="menu_divider"></li>
                <div id="menu_title2" class="menu_title" onclick="openMenu(this)">
                    课程管理
                    <div class="indicator" id="indicator2">^</div>
                </div>
                <div class="menu" id="menu2">
                    <div class="item">
                        <a href="/cyb/course/showCoursePage">课程信息</a>
                    </div>
                    <li class="item_divider"></li>
                    <div class="item">
                        <a href="/cyb/course/addCoursePage">创建课程</a>
                    </div>
                </div>
            </div>
        </div>
        <div style="background-color: #e9e9e9;width: 1px;height: 446px;"></div>
        <div class="col-sm-8" style="height: 446px;">
            <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:400px;overflow:auto; position: relative;width: 920px;">
                <div class="well custom-radio" style="margin-left: 20px;width: 700px;background-color: white;">
                    <form name="form1" style="margin-top: 20px;margin-left: 30px;padding-right: 30px;" method="post" action="/cyb/course/addCourse" enctype="multipart/form-data">
                        <fieldset>
                            <div class="form-group row" style="margin-top: 10px;">
                                <label for="CourseName" class="col-sm-4 col-form-label" style="font-size: 20px;">课程名称</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="CourseName" placeholder="请输入课程名称" name="courseName">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="InsertPicture" class="col-sm-4 col-form-label" style="font-size: 20px;">添加封面</label>
                                <div class="col-sm-6">
                                    <input type="file" class="form-control-file" id="InsertPicture" aria-describedby="fileHelp" name="courseImg">
                                    <small id="fileHelp" class="form-text text-muted">请选择图片文件作为课程封面。</small>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="InstituteSelect1" class="col-sm-4 col-form-label" style="font-size: 20px;">所属学院</label>
                                <div class="col-sm-6">
                                    <select class="form-control" id="InstituteSelect1" name="acadamyName" onChange="getMajor()">
                                        <option value="0">请选择课程所属学院</option>
                                        <option value="1">机电与信息工程学院</option>
                                        <option value="2">地球科学与测绘工程学院</option>
                                        <option value="3">化学与环境工程学院</option>
                                        <option value="4">资源与安全工程学院</option>
                                        <option value="5">文法学院</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="MajorSelect1" class="col-sm-4 col-form-label" style="font-size: 20px;">所属专业</label>
                                <div class="col-sm-6">
                                    <select class="form-control" id="MajorSelect1" name="majorName">
                                        <option value="0">请选择课程所属专业</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row" style="margin-top: 10px;">
                                <label for="CourseName" class="col-sm-4 col-form-label" style="font-size: 20px;">课程讲师</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="TeacherName" placeholder="请输入讲师名称" name="courseTeacher">
                                </div>
                            </div>
                            <div class="form-group row" style="margin-top: 10px;">
                                <label for="CourseName" class="col-sm-4 col-form-label" style="font-size: 20px;">课程时长</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="CourseTime" placeholder="请输入课程时长" name="courseHour">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4"></div>
                                <div>
                                    <p style="color: darksalmon">1.章名称格式为“第+阿拉伯数字+章 章名称”，章名称用英文分号“;”分隔</p>
                                    <p style="color: darksalmon">2.PPT、视频的名称格式为“章.节 节名称”，且PPT、视频一一对应</p>
                                </div>
                            </div>
                            <div class="form-group row" style="margin-top: 10px;">
                                <label for="CourseName" class="col-sm-4 col-form-label" style="font-size: 20px;">章节列表</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control" id="courseChapter" placeholder="请输入章节（以英文分号分隔）" name="chapters">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="InsertPicture" class="col-sm-4 col-form-label" style="font-size: 20px;">上传PPT</label>
                                <div class="col-sm-6">
                                    <input type="file" webkitdirectory class="form-control-file" id="InsertPPT" aria-describedby="fileHelp" name="ppts">
                                    <small id="fileHelp01" class="form-text text-muted">请选择PPT文件夹作为课程PPT。</small>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="InsertPicture" class="col-sm-4 col-form-label" style="font-size: 20px;">上传视频</label>
                                <div class="col-sm-6">
                                    <input type="file" webkitdirectory class="form-control-file" id="InsertVideo" aria-describedby="fileHelp" name="videos">
                                    <small id="fileHelp02" class="form-text text-muted">请选择视频文件夹作为课程视频。</small>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg" style="margin-left: 30px;">提交</button>
                        </fieldset>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>   <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

<script type="text/javascript">
    //定义一个二维数组
    var major=[
        ["电气工程与自动化系","计算机科学与技术系","机械电子工程系","通信与电子技术系","测控技术与仪器系","材料科学与工程系"],
        ["能源地质系","地质工程与环境系","地球物理与信息系","测绘与土地利用系","遥感与地理信息系"],
        ["矿物加工工程系","环境与生物工程系","化学工程系"],
        ["矿业工程系","资源工程系","安全工程系","安全技术与管理系"],
        ["外语系","行政管理系","法学系"]
    ];
    function getMajor(){
        var sltInstitute=document.form1.acadamyName;   //获得国家下拉框的对象
        var sltMajor=document.form1.majorName;     //获得城市下拉框的对象
        var institute=major[sltInstitute.selectedIndex-1];    //得到对应国家的城市数组
        sltMajor.length=1;    //清空城市下拉框，仅留提示选项。
        //通过for循环，将城市中的值填充到城市下拉框中
        for(var i=0;i<institute.length;i++){
            sltMajor[i+1]=new Option(institute[i],institute[i]);
        }
    }
</script>

</html>

